<template>
	<div class="query">
		<view class="bg">
			<view class="leftText">
				<text>缴费总额</text>
				<text class="total">{{totalMoney}}元</text>
			</view>
			<!-- <view class="totalRight">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input borderStyle">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		
		<view class="serviceBg" v-for="val in query" :key="val.id">
			<view class="boxTitle">
				<text class="floatLeft">缴费日期</text>
				<text class="floatRight">{{val.queryDate}}</text>
			</view>
			<view v-for="(item,index) in val.msg" :key="index" class="msg" >
				<text class="floatLeft">{{item.title}}</text>
				<text class="floatRight">{{item.score}}</text>
			</view>
		</view>
		
	</div>
</template>

<script>
	const {query} = require('../../utils/api.js')
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				totalMoney:0,
				date: currentDate,
				query:[]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		created() {
			this.getQuery();
		},
		methods:{
			getQuery(){
				query().then(data=>{
					this.query = data.data;
					this.query.forEach(item=>{
						item.msg = JSON.parse(item.msg);
						item.msg.forEach(val=>{
							this.totalMoney += val.score;
						})
					})
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			pay(index){
				console.log(index,5)
				if(index == 5){
					uni.navigateTo({
						url: 'query'
					});
				}
				
			}
		}
	}
</script>

<style scoped src="../../static/css/grade.css"></style>
